

<!-- 优惠券弹窗-选择 -->
<template>
	
	<!-- iphoneX适配 -->
	<view v-show="showFlag" class="bg-Container">
		<view class="outer-Container">
			
			<!-- 弹窗标题 -->
			<view class="modalTitle">
				选择优惠券
			</view>
			
			<!-- 关闭弹窗 -->
			<image @click="closeModalHandler" :src="icon.closeModalBtn" class="closeModalBtn"></image>
			
			<!-- 优惠券状态 -->
			<view class="navbar">
				<view 
					v-for="(item, index) in navList" :key="index" 
					class="nav-item" 
					:class="{current: tabCurrentIndex === index}"
					@click="categoryClick(index)"
				>
					{{item.name}}
					<block v-if="index == 0">
						({{kyCouponListLength}})
					</block> 
					<block v-else>
						({{bkyCouponListLength}})
					</block> 
				</view>
			</view>
			
			<view id="splitLine-1" class="splitLine-Container">
				<view class="topLine borderOneRpx">
				</view>
			</view>
			
			
			<!-- 可用优惠券 -->
			<scroll-view
					class="list-scroll-content" 
					scroll-y
					v-if="tabCurrentIndex == 0" 
				>
				<view class="coupon" :class="{disabledCoupon: item.disabledTag, disabledTag: item.disabledTag}" v-for="(item, index) in kyCouponList" :key="item.id">
					
					<image v-if="!item.disabledTag" class="bg" :src="icon.youhuiquan_yes"></image>
					<image v-else class="bg" :src="icon.youhuiquan_no"></image>
					
					<view class="detail">
						<view class="left">
							<view v-if="item.couponType != 20" class="price">
								<text>￥</text>
								<text>{{item.faceValue / 100}}</text>
							</view>
							<view v-else class="price">
								<text style="font-size: 54rpx;">{{ item.faceValue / 10 }}</text>
								<text style="font-size: 28rpx;">折</text>
							</view>
							
							<view class="msg ellipsis2">
								满￥{{ item.enoughMoney / 100}}可用
							</view>
						</view>
						<view class="right">
							<view class="top">
								<view class="name">
									
									<!-- 10满减券,20折扣券,30免单券,40免运费券,50满减运费券 -->
									<text class="quan" v-if="item.couponType == 10">满减券</text>
									<text class="quan" v-else-if="item.couponType == 20">折扣券</text>
									<text class="quan" v-else-if="item.couponType == 30">免单券</text>
									<text class="quan" v-else-if="item.couponType == 40">免运费券</text>
									<text class="quan" v-else-if="item.couponType == 50">满减运费券</text>
									
									<!-- 优惠券名称 -->
									<text class="text ellipsis1">{{ item.couponName }}</text>
								</view>
								<view class="time">
									<view class="canUse">
										{{item.beginTime | formatDate}}-{{item.endTime | formatDate}}
									</view>
									
									<block v-if="item.disabledTag">
										<image :src="icon.empty" class="checkbox"></image>
									</block>
									<block v-else>
										<image v-if="item.selectedTag == 1" @click="couponSelect('kyCouponList', index, 0)" :src="icon.select" class="checkbox"></image>
										<image v-else @click="couponSelect('kyCouponList', index, 1)" :src="icon.empty" class="checkbox"></image>
									</block>
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.disabledTag" class="disabledCouponTip">
						此券暂不可与已勾选券叠加使用
					</view>
				</view>
			</scroll-view>
			
			
			<!-- 不可用优惠券 -->
			<scroll-view
					class="list-scroll-content" 
					scroll-y
					v-if="tabCurrentIndex == 1" 
				>
				<view class="coupon cantUse" v-for="(item, index) in bkyCouponList" :key="item.id">
					
					<image class="bg" :src="icon.youhuibukeyong"></image>
					
					<view class="detail">
						<view class="left">
							<view v-if="item.couponType != 20" class="price">
								<text>￥</text>
								<text>{{item.faceValue / 100}}</text>
							</view>
							<view v-else class="price">
								<text style="font-size: 54rpx;">{{ item.faceValue / 10 }}</text>
								<text style="font-size: 28rpx;">折</text>
							</view>
							
							<view class="msg ellipsis2">
								满￥{{ item.enoughMoney / 100 }}可用
							</view>
						</view>
						<view class="right">
							<view class="top">
								<view class="name ellipsis2">
									
									<!-- 10满减券,20折扣券,30免单券,40免运费券,50满减运费券 -->
									<text class="quan" v-if="item.couponType == 10">满减券</text>
									<text class="quan" v-else-if="item.couponType == 20">折扣券</text>
									<text class="quan" v-else-if="item.couponType == 30">免单券</text>
									<text class="quan" v-else-if="item.couponType == 40">免运费券</text>
									<text class="quan" v-else-if="item.couponType == 50">满减运费券</text>
									
									<!-- 优惠券名称 -->
									<text class="text">{{ item.couponName }}</text>
								</view>
								<view class="time">
									<view class="canUse">
										{{item.beginTime | formatDate}}-{{item.endTime | formatDate}}
									</view>
									
									<!-- <image :src="icon.select" class="checkbox" v-if="item.selectedTag == 1" @click="couponSelect('kyCouponList', index, 0)"></image>
									<image :src="icon.empty" class="checkbox" v-else @click="couponSelect('kyCouponList', index, 1)"></image> -->
								</view>
							</view>
							
							<!-- 不可用原因 -->
							<view class="theReason">
								<image class="reasonIcon" :src="icon.reasonIcon" mode=""></image>
								<view class="reasonText ellipsis1">
									{{item.description}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			
			<!-- 确定按钮 -->
			<view class="sureBtnOuter-Container">
				<view class="topLine borderOneRpx">
				</view>
				<view @click="confirmSelectCoupon()" class="sureBtn-Container">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		filters: {
			formatDate: function(date) {
				
				var date = new Date(date);
				var YY = date.getFullYear() + '.';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '.';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				// var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				// var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				// var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				
				return YY + MM + DD;
			}
		},
		data() {
			return {
				icon: {
					closeModalBtn: "/static/images/common/closeModal.png",
					
					youhuiquan_yes: '/static/images/coupon/youhuiquan_yes.png',
					youhuiquan_no: '/static/images/coupon/youhuiquan_no.png',
					youhui_zk: '/static/images/coupon/youhui_zk.png',
					youhuibukeyong: '/static/images/coupon/youhuibukeyong.png',
					reasonIcon: '/static/images/coupon/reasonIcon.png',
					
					select: '/static/images/cart/sel.png',
					empty: '/static/images/cart/empty.png',
				},
				
				//优惠券数量
				tabCurrentIndex: 0,
				navList: [{
					id: 1,
					name: '可用优惠券'
				},{
					id: 2,
					name: '不可用优惠券'
				}]
			};
		},
	
		components: {},
		props: {
			showFlag: {
				type: Boolean,
				default: false
			},
			kyCouponList: Array,
			bkyCouponList: Array,
			kyCouponListLength: Number,
			bkyCouponListLength: Number
		},
		methods: {
			
			//关闭弹窗 
			closeModalHandler() {
				this.$emit('closeModalHandler');
			},
			
			
			//优惠券状态
			categoryClick(index) {
				this.tabCurrentIndex = index;
			},
			
			
			//选中\取消优惠券
			couponSelect(type, index, status) {
				var params = {
					type: type,
					index: index,
					status: status
				};
				this.$emit('couponSelectHandler', params);
			},
			
			
			//确认选择优惠券
			confirmSelectCoupon() {
				this.$emit('confirmSelectCouponHandler');
			}
		}
	}
</script>

<style lang="less">
	
	.bg-Container {
		z-index: 99999;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background:rgba(0,0,0,0.7);
		
		// 弹窗标题
		.modalTitle {
			margin-top: 50rpx;
			margin-bottom: 75rpx;
			width: 100%;
			height:30rpx;
			line-height:30rpx;
			text-align: center;
			font-size:30rpx;
			font-family:PingFang SC;
			// font-weight:bold;
			color:rgba(51,51,51,1);
		}
		
		// 关闭按钮
		.closeModalBtn {
			z-index: 99999;
			position: absolute;
			top: 36rpx;
			right: 36rpx;
			width: 25rpx;
			height: 24rpx;
		}
		
		// 外层容器
		.outer-Container {
			z-index: 99999;
			position: fixed;
			bottom: 0;
			width:100%;
			height:1100rpx;
			background:rgba(255,255,255,1);
			box-shadow:0px 0px 26rpx 0px rgba(143,143,143,0.14);
			border-radius:16rpx 16rpx 0px 0px;
			
			// 确定按钮
			.sureBtnOuter-Container {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 210rpx;
				
				.topLine {
					position: absolute;
					top: 0;
					width: 690rpx;
					height: 1rpx;
				}
				.borderOneRpx:after {
					border-color: rgba(238,238,238,1);
				}
				
				.sureBtn-Container {
					width:600rpx;
					height:70rpx;
					background:#FE5E49;
					border-radius:35rpx;
					
					text-align: center;
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(255,255,255,1);
					line-height:70rpx;
				}
			}
		}
		
		
		//优惠券状态
		.navbar{
			display: flex;
			height: 80rpx;
			background: #fff;
			// box-shadow: 0 1px 5px rgba(0,0,0,.06);
			position: relative;
			z-index: 10;
			
			.nav-item{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				height: 100%;
				font-size:24rpx;
				font-family:PingFang;
				// font-weight:500;
				color:#666666;
				
				&.current{
					font-weight:bold;
					color:rgba(51,51,51,1);
					
					&:after{
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 44px;
						height: 0;
						width:154rpx;
						height:4rpx;
						background:#FE5E49;
						border-radius:2rpx;
					}
				}
			}
			
			.moreCategory {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				width: 80rpx;
				height: 80rpx;
				
				image {
					width: 21rpx;
					height: 12rpx;
				}
			}
		}
		
		// 分割线
		.splitLine-Container {
			position: relative;
			margin: 0 auto;
			width: 690rpx;
			height: 48rpx;
			
			.topLine {
				position: absolute;
				top: 0;
				width: 690rpx;
				height: 1rpx;
			}
			.borderOneRpx:after {
				border-color: rgba(238,238,238,1);
			}
		}
		
		// 单个优惠券
		.coupon {
			position: relative;
			margin: 0 auto;
			width: 690rpx;
			z-index: 2;
			
			.bg {
				width: 690rpx;
				height: 200rpx;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
			}
			.detail {
				position: relative;
				z-index: 2;
				height: 190rpx;
				width: 690rpx;
				display: flex;
				margin-bottom: 20rpx;
				
				.left {
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					justify-content: center;
					text-align: center;
					width: 200rpx;
					min-height: 190rpx;
					
					.price text:first-child {
						color: #FE5E49;
						font-size: 30rpx;
						font-weight: bold;
					}
					.price text:last-child {
						color: #FE5E49;
						font-size: 54rpx;
						font-weight: bold;
					}
					.msg {
						font-size: 20rpx;
						color: #FE5E49;
						margin-top: -6rpx;
					}
				}
				.right {
					width: 488rpx;
					height: 190rpx;
					
					.top {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 100%;
						padding: 20rpx;
						.name {
							display: flex;
							position: relative;
						}
						.text {
							font-size: 22rpx;
							// font-weight: bold;
							color: #333333;
							padding-left:108rpx;
						}
						.quan {
							position: absolute;
							// top: 16rpx;
							left: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 90rpx;
							height: 28rpx;
							white-space: nowrap;
							font-size: 18rpx;
							color: #FE5E49;
							border-radius: 14rpx;
							border: 1rpx solid #FE5E49;
						}
						.time {
							height: 36rpx;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							
							.canUse {
								color: #666666;
								width: 70%;
								font-size: 20rpx;
							}
							.use {
								width: 100rpx;
								text-align: right;
								view {
									color: #fff;
									width: 120rpx;
									border-radius: 18rpx;
									height: 36rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 18rpx;
									background: #FE5E49;
								}
							}
							.unUse {
								width: 100rpx;
								text-align: right;
								view {
									color: #fff;
									width: 120rpx;
									border-radius: 18rpx;
									height: 36rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 18rpx;
									background:rgba(204,204,204,1);
								}
							}
						}
					}
					.bottom {
						display: flex;
						align-items: center;
						height: 40rpx;
						image {
							width: 12rpx;
							height: 8rpx;
						}
						view:first-child {
							color: #666666;
							font-size: 18rpx;
							padding-left: 26rpx;
							width: 50%;
						}
						view:last-child {
							padding-right: 26rpx;
							width: 50%;
							display: flex;
							align-items: center;
							flex-direction: row-reverse;
						}
					}
					
					.theReason {
						display: flex;
						align-items: center;
						position: absolute;
						bottom: 0;
						width: 484rpx;
						height:42rpx;
						border-top:1rpx dotted rgba(173,173,173,1);
						opacity:0.3;
						
						.reasonIcon {
							margin-left: 28rpx;
							width: 19rpx;
							height: 19rpx;
						}
						
						.reasonText {
							max-width: 410rpx;
							margin-left: 13rpx;
							font-size:18rpx;
							font-family:PingFang SC;
							// font-weight:500;
							color:rgba(153,153,153,1);
							line-height:40rpx;
						}
					}
				}
			}
		}
		
		//单选按钮
		.checkbox {
			height: 36rpx;
			width: 36rpx;
		}
	}
	
	.list-scroll-content {
		height: 600rpx;
	}
	
	.cantUse {
		.price text:first-child {
			color: #ADADAD !important;
		}
		.price text:last-child {
			color: #ADADAD !important;
		}
		.msg {
			color: #ADADAD !important;
		}
		
		.quan { 
			border: 1px solid #CCCCCC !important;
			color: #999999 !important;
		}
		
		
		.top {
			height: 150rpx !important;
		}
	}
	
	
	//不可重叠使用优惠券
	.disabledCoupon {
		.price text:first-child {
			color: #ADADAD !important;
		}
		.price text:last-child {
			color: #ADADAD !important;
		}
		.msg {
			color: #ADADAD !important;
		}
		
		.quan { 
			border: 1px solid #CCCCCC !important;
			color: #999999 !important;
		}
	}
	.disabledCouponTip {
		width: 690rpx;
		// border: 0.5rpx solid #adadad;
		border-top: 0;
		margin-left: 1rpx;
		color: #666;
		font-size: 24rpx;
		margin-top: -20rpx;
		padding: 10rpx 20rpx;
	}
</style>



